<template>
  <view class="container" style="position: relative;">
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="content">库存商品</block>
    </cu-custom>
    <scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''">
      <scroll-view class="bg-white nav fixed" style="top:40px" scroll-x scroll-with-animation :scroll-left="scrollLeft">
        <view class="flex text-center ">
          <view class="cu-item flex-sub" :class="item.cate_name==categoryName?'text-orange cur':''"
            v-for="(item,index) in cateList" :key="index" @tap="tabSelect(item.cate_name)"
            :data-categoryName="item.cate_name">
            {{item.cate_name}}
          </view>
        </view>
      </scroll-view>

      <view style="height: 45px;"></view>

      <view class="cu-list menu-avatar no-padding" v-if="erpGoodsResult.records && erpGoodsResult.records.length>0">
        <view class="cu-item" v-for="(item, i) in erpGoodsResult.records" :key="i">
          <view class="cu-avatar round lg">{{item.shouzi}}</view>
          <view class="content">
            <view class="text-grey text-xsl">{{item.goodsName}}</view>
            <!-- <view class="text-gray text-sm">
              {{item.goodsName}}
            </view> -->
          </view>
          <view v-if="item.spec=='大'" class="action" style="font-size: 18px; font-weight: bold;">
            {{item.spec}}
          </view>
          <view v-else-if="item.spec=='小'" class="action" style="font-size: 14px; font-weight: bold;">
            {{item.spec}}
          </view>
          <view v-else class="action">
            {{item.spec}}
          </view>
          <view class="action text-red text-lg text-bold">
            {{item.goodsNumber}}
          </view>
        </view>

        <view style="height: 80px;"></view>
      </view>
      <view v-else style="padding: 40px 10px 10px; text-align:center;">
        <span v-if="loadding">数据加载中。。。</span>
        <span v-else>无数据</span>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        search: {},
        screen_show: 0,
        list: [{
          name: ''
        }],
        scrollLeft: 0,
        cateList: [{
          id: 1,
          cate_name: '食用菌'
        }, {
          id: 2,
          cate_name: '神马商城'
        }],
        kw: '',
        modalName: '',
        merName: '',
        phone: '',
        page: 1,
        currentDate: '',
        loadding: true,
        erpGoodsResult: {},
        categoryName: "食用菌"
      }

    },

    onLoad(opt) {
      this.cate_id = opt.cate_id
      this.loadData();
      // this.getCateList()

      // 主页数据u

    },
    // onNavigationBarButtonTap() {
    //   // this.screen();
    //   this.showModal()
    // },
    methods: {
      reset() {
        this.search.name = "";
        this.search.phone = "";
        this.search.start_time = this.getDate({
          format: true
        });
        this.search.end_time = this.getDate({
          format: true
        });
      },
      searchResult() {
        // this.page = 1;
        // this.productList = [];
        // this.search.status = 1;
        this.page = 1;
        this.cate_id = 1

        this.hideModal()
        this.loadData()
        // this.channel_list();
        // this.screen();
      },
      
      
      
      
      tabSelect(categoryName) {
        this.categoryName = categoryName;
        this.loadData()
      },
      loadData() {
        let that = this
        this.loadding = true

        let url = '/erp/erpGoods/list';
        this.$http.get(url, {
          params: {
            pageSize: 100,
            categoryName: that.categoryName
          }
        }).then(res => {
          this.loadding = false

          let result = res.data.result;
          let tmp_result = {
            records: []
          }
          result.records.forEach(_row => {
            _row.shouzi = that.$getFristChar(_row.goodsName)
          })

          if (res.data.success) {
            this.erpGoodsResult = res.data.result
          }

        }).catch(e => {
          this.loadding = false
          console.log(e)
        })
      },
      // getCateList() {
      //   this.httpGet("merchant/listCate?page=").then(resp => {
      //     if (resp.data.status == "ok" && resp.data.result.list && resp.data.result.list.length > 0) {
      //       this.cateList = resp.data.result.list
      //     }
      //   });
      // },
    }
  }
</script>

<style lang="scss">
</style>
